<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: unset !important;
		padding: 0 2px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #555 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		width: 80px !important;
	}

	.commonBg {
		background: #fff;
		border: 1px solid#ddd;
		border-radius: 8px;
		width: 30px;
		height: 30px;
		font-size: 12px;
		text-align: center;
		line-height: 30px;
		position: relative;
	}

	.dot1 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4475f3;
	}

	.dot2 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fb8981;
	}

	.dotLabel {
		margin-right: 5px;
		color: #999;
		font-size: 13px;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}
</style>
<template>
	<div class="mb10">

		<div
			style="background: #fff;padding: 18px 29px 18px 34px;border-radius: 8px;display: flex;justify-content: space-between;">

			<div style="flex: 8;">
				<div style="background: #fff;margin-bottom: 10px;border-bottom:1px solid#EDECF1;padding-bottom:10px">
					<div class="displayFlex mb10">
						<div class="font16 mr30">日常巡检</div>

						<div style="color: #555;" class="mr20 font15 displayFlex">
							<span class="mr10">{{params.outletName}}</span>
							<i class="el-icon-arrow-down"></i>
						</div>

						<div class="date-item displayFlex">
							<el-date-picker v-model="params.monthDateCheck" type="month" placeholder="选择月" size="mini"
								@change="getList(),getListByOutletId()" value-format="yyyy-MM" style="width: 80px;">
							</el-date-picker>
							<i class="el-icon-arrow-down"></i>
						</div>
					</div>
					<div class="displayFlex" style="justify-content: flex-end;">
						<div class="displayFlex" style="margin-right: 15px;">
							<div
								style="background: #CCDDEF;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
								<img src="@/assets/sIcon70.png"
									style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
							</div>
							<span class="dotLabel">正常</span>
						</div>

						<div class="displayFlex" style="margin-right: 15px;">
							<div
								style="background: #F5DCA0;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
								<img src="@/assets/sIcon75.png"
									style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
							</div>
							<span class="dotLabel">异常</span>
						</div>

						<div class="displayFlex" style="margin-right: 15px;">
							<div
								style="background: #F2F2F2;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
								<img src="@/assets/sIcon71.png"
									style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
							</div>
							<span class="dotLabel">不生产</span>
						</div>

						<div class="displayFlex" style="margin-right: 15px;">
							<img src="@/assets/sIcon74.png" style="width: 20px;height: 20px;" />
							<span class="dotLabel">巡检</span>
						</div>

						<div class="displayFlex" style="margin-right: 15px;">
							<img src="@/assets/sIcon77.png" style="width: 20px;height: 20px;" />
							<span class="dotLabel">在线监测预警</span>
						</div>

						<div class="displayFlex" style="margin-right: 15px;">
							<img src="@/assets/sIcon76.png" style="width: 20px;height: 20px;" />
							<span class="dotLabel">有副产</span>
						</div>

						<div class="displayFlex" style="margin-right: 15px;">
							<img src="@/assets/sIcon73.png" style="width: 20px;height: 20px;" />
							<span class="dotLabel">添加药剂</span>
						</div>
					</div>
				</div>

				<div>
					<div style="flex-wrap: wrap;display: flex;">
						<div v-for="(item,index) in dayList" :key="index" @click="previewWaterStandingBook(item)" style="width: calc(14% - 14px);margin: 8px;padding: 10px;height: 70px;
							border-radius: 8px;color: #555;position: relative;text-align: center;background: #fff;"
							:style="{'background':item.bg}">
							<div class="displayFlexBet mb10">
								<div style="font-size: 12px;margin-right: 10px;">{{item.dateStr.split("日")[0]}}</div>
							</div>
							<div class="displayFlex">
								<!-- <div style="width: 24px;height: 24px;background: #fff;border-radius: 8px;padding: 2px 0;">
									<img v-if="item.workStatus == null" src="@/assets/sIcon72.png"
										style="width: 20px;height: 20px;" />
								</div> -->
								<div v-if="item.isInspect" class="bgfff bra8 mr10"
									style="width: 24px;height: 24px;padding: 2px 0;">
									<img src="@/assets/sIcon74.png" style="width: 20px;height: 20px;" />
								</div>

								<div v-if="item.isMaterialChange" class="bgfff bra8 mr10"
									style="width: 24px;height: 24px;padding: 2px 0;">
									<img src="@/assets/sIcon73.png" style="width: 20px;height: 20px;" />
								</div>
								<div v-if="item.warningExist" class="bgfff bra8 mr10"
									style="width: 24px;height: 24px;padding: 2px 0;">
									<img src="@/assets/sIcon77.png" style="width: 20px;height: 20px;" />
								</div>

								<img v-if="item.workStatus =='NORMAL'" src="@/assets/sIcon70.png"
									style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
								<img v-else-if="item.workStatus =='ABNORMAL' || item.warningExist"
									src="@/assets/sIcon75.png"
									style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
								<!-- <img v-else-if="item.workStatus =='NOT_PRODUCE'" src="@/assets/sIcon71.png"
									style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" /> -->
								<img v-else-if="item.workStatus =='NOT_PRODUCE'" src="@/assets/sIcon71.png"
									style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
							</div>
						</div>
					</div>
				</div>
			</div>


			<div style="flex: 2;" class="ml10">
				<div>
					<div style="color: #222;" class="font15 mb10">台账情况</div>
					<div class="font15 color555 displayFlex mb5">
						<div class="mr20" style="width: 80px;">全年缺{{data2.yearLackNum}}</div>
						<div>本月缺{{data2.monthLackNum}}</div>
					</div>
					<div>
						<div class="displayFlexBet font13 mb3" style="color: #BCBCBC;">
							<div>0%</div>
							<div>100%</div>
						</div>
						<div class="displayFlexBet" style="position: relative;">
							<div v-for="(item,index) in 20" class="mr5">
								<div v-if="index <=2"
									:style="{'background':(data2.yearCompletePercent>(index+1)*5)?'rgba(255, 58, 87, 1)':'rgba(255, 58, 87, 0.3)'}"
									style="width: 8px;height: 40px;border-radius: 2px;"></div>
								<div v-if="index >2 && index<=9"
									:style="{'background':(data2.yearCompletePercent>(index+1)*5)?'rgba(255, 166, 39, 1)':'rgba(255, 166, 39, 0.3)'}"
									style="width: 8px;height: 40px;border-radius: 2px;"></div>
								<div v-if="index>9"
									:style="{'background':(data2.yearCompletePercent>=(index+1)*5)?'rgba(72, 241, 243, 1)':'rgba(72, 241, 243, 0.3)'}"
									style="width: 8px;height: 40px;border-radius: 2px;"></div>
							</div>
							<div style="position: absolute;top:0"
								:style="{'left':(data2.yearCompletePercent>0?(data2.yearCompletePercent - 2):0)+'%'}">
								<div style="width: 2px;height: 52px;background: #555555;"></div>
								<div style="color: #888;width: 60px;margin-left: -30px;">
									完成{{data2.yearCompletePercent}}%</div>
							</div>
						</div>
					</div>
				</div>

				<div class="mt40">
					<div style="color: #222;" class="font15 mb10">巡检情况</div>
					<div class="font15 color555 displayFlex mb5">
						<div class="mr20" style="width: 80px;">全年缺{{data3.yearLackNum}}</div>
						<div>本月缺{{data3.monthLackNum}}</div>
					</div>
					<div>
						<div class="displayFlexBet font13 mb3" style="color: #BCBCBC;">
							<div>0%</div>
							<div>100%</div>
						</div>
						<div class="displayFlexBet" style="position: relative;">
							<div v-for="(item,index) in 20" class="mr5">
								<div v-if="index <=2"
									:style="{'background':(data3.yearCompletePercent>(index+1)*5)?'rgba(255, 58, 87, 1)':'rgba(255, 58, 87, 0.3)'}"
									style="width: 8px;height: 40px;border-radius: 2px;"></div>
								<div v-if="index >2 && index<=9"
									:style="{'background':(data3.yearCompletePercent>(index+1)*5)?'rgba(255, 166, 39, 1)':'rgba(255, 166, 39, 0.3)'}"
									style="width: 8px;height: 40px;border-radius: 2px;"></div>
								<div v-if="index>9"
									:style="{'background':(data3.yearCompletePercent>=(index+1)*5)?'rgba(72, 241, 243, 1)':'rgba(72, 241, 243, 0.3)'}"
									style="width: 8px;height: 40px;border-radius: 2px;"></div>
							</div>
							<div style="position: absolute;top:0"
								:style="{'left':(data3.yearCompletePercent>0?(data3.yearCompletePercent - 2):0)+'%'}">
								<div style="width: 2px;height: 52px;background: #555555;"></div>
								<div style="color: #888;width: 60px;margin-left: -30px;">
									完成{{data3.yearCompletePercent}}%</div>
							</div>
						</div>
					</div>
				</div>

				<div id="chart2" style="height: 250px;"></div>
			</div>
		</div>

		<xunjianHis ref="xunjianHis" v-if="params.outletId" :outletId="params.outletId"></xunjianHis>
		<previewWaterStandingBook ref="previewWaterStandingBook" v-if="params.outletId" :outletId="params.outletId"
			@success="getWaterOutletBaseList" :outletName="outletName" />

		<el-dialog :title="params.outletName+dialogTitle" :visible.sync="dialogVisible" width="50%" append-to-body>
			<div>
				<div v-for="(item,index) in dataList1" :key="index">
					<div style="font-size:14px;color:#888" class="mb20">
						<span>{{item.year}}年</span>
						<span class="ml20">共{{item.totalNum}}天未作台账</span>
					</div>

					<div style="border: 1px solid#EDECF1;border-radius: 8px;margin-bottom: 20px;">
						<div v-for="(item2,index2) in item.list" :key="index2" class="pad20" @click="choose(item2)"
							:style="{'border-right':index2%6 == 5?'':'1px solid#EDECF1','border-bottom':index2> 5?'':'1px solid#EDECF1'}"
							style="display: inline-block;width: 16.6%;text-align:center">
							<div style="font-size:20px" class="mb5">{{item2.num}}天</div>
							<div style="font-size:13px;color:#999">
								<span>{{item2.month}}</span>
								<span>·</span>
								<span>{{item2.engMonth}}</span>
							</div>
						</div>
					</div>
				</div>
				<el-empty v-if="dialogTitle == '异常台账' && dataList1.length == 0" />
			</div>
		</el-dialog>
		
		<orderDayDet ref="orderDayDet" @editThis="(value)=>{$refs.previewWaterStandingBook.open(value.outletId, value)}" />
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import xunjianHis from '@/components/wasteWater/xunjianHis'
	import previewWaterStandingBook from '@/components/wasteWater/previewWaterStandingBook'
	import orderDayDet from '@/components/wasteWater/orderDayDet'
	import moment from 'moment'
	let that

	export default {
		components: {
			xunjianHis,
			previewWaterStandingBook,
			orderDayDet
		},
		props: {
			outletId: {
				type: String,
			},
			outletName: {
				type: String,
			},
		},
		data() {
			return {
				dialogVisible: false,
				dialogTitle: '未做台账',
				params: {
					outletId: '',
					outleName: '',
					monthDate: moment().format('YYYY-MM-DD'),
					monthDateCheck: moment().format('YYYY-MM'),
					defenceId: ''
				},

				dayList: [],
				outletList: [],
				defenceList: [],
				parameterAmountList: [],
				dataList1: [],
				data2: {},
				data3: {},
				data4: {}
			}
		},
		mounted: function() {
			that = this
			//console.log(that.outletName)
			that.params.ticketId = that.$store.state.token
			that.params.outletId = that.outletId
			that.params.outletName = that.outletName
			that.getWaterOutletBaseList()
			that.countWaterInspect()
			that.countWaterMaterialUse()
		},
		methods: {
			countWaterMaterialUse() {
				that.ajax({
					url: '/outletDetail/countWaterMaterialUse',
					data: JSON.stringify({
						outletId: that.params.outletId,
						recordDate: moment().format('YYYY-MM') + "-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						//that.data4 = result.data

						let xAxisData = []
						let seriesData1 = []
						for (let item of result.data) {
							xAxisData.push(item.materialName)
							seriesData1.push(item.useQty || 0)
						}
						var chartDom = document.getElementById('chart2');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							},
							legend: {},
							grid: {
								show: false,
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								data: xAxisData,
								axisTick: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false,
								},
								axisLabel: {
									show: true, // 是否显示刻度标签，默认显示
									interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
									//rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
									inside: false, // 刻度标签是否朝内，默认朝外
									margin: 6, // 刻度标签与轴线之间的距离
								}
							},
							yAxis: {
								type: 'value',
								splitLine: {
									show: true,
									lineStyle: {
										color: ["#FAFBFC"],
									},
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false,
								},
								axisLabel: {
									show: false,
									textStyle: {
										color: '#333',
										fontSize: 14,
										fontWeight: 'bold'
									}
								},
							},
							series: [{
								data: seriesData1,
								barWidth: 20,
								type: 'bar',
								label: {
									normal: {
										show: true,
										position: 'top',
										color: '#333',
										fontSize: 12,
										fontWeight: 'bold',
										formatter: function(params) {
											if (params.value > 0) {
												var str = params.value;
												// if (xNames[params.dataIndex]) {
												// 	str += '\n' + xNames[params.dataIndex] + '元'
												// }
												return str;
											} else {
												return "";
											}
										}
									}
								},
							}]
						};

						option && myChart.setOption(option);
					},
				})
			},

			countWaterInspect() {
				that.ajax({
					url: '/outletDetail/countWaterStdBook',
					data: JSON.stringify({
						outletId: that.params.outletId,
						recordDate: moment().format('YYYY') + "-01-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						that.data2 = result.data
					},
				})

				that.ajax({
					url: '/outletDetail/countWaterInspect',
					data: JSON.stringify({
						outletId: that.params.outletId,
						recordDate: moment().format('YYYY') + "-01-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						that.data3 = result.data
					},
				})
			},

			gotoPage() {
				that.$router.push("/wasteWater/outletInspectDefDet?defenceId=" + that.params.defenceId)
			},

			choose(item) {
				that.params.monthDate = item.year + "-" + item.month.split("月")[0]
				that.params.monthDateCheck = item.year + "-" + item.month.split("月")[0] + "-" + item.num
				that.dialogVisible = false
				that.getWaterOutletBaseList()
			},

			makeOrder() {
				this.$confirm('请前往手机端制作台账?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {}).catch(() => {});
			},

			//预览制作台账
			previewWaterStandingBook(item) {
				item.outletId = that.params.outletId
				if (item.standingBookId) return that.$refs.orderDayDet.open(item)
				
				that.$refs.previewWaterStandingBook.open(that.params.outletId, item)
			},

			showXunJianRecord() {
				that.$refs.xunjianHis.open(that.params.outletId, that.params.monthDateCheck)
			},

			gotoDet() {
				that.$router.push("/wasteWater/orderDet?ticketId=" + that.params.ticketId + "&monthDate=" + that.params
					.monthDateCheck + "&outletId=" + that.params.outletId)
			},

			getWaterOutletBaseList() {
				that.getList()
				that.getListByOutletId()
			},

			getAbnormalStdBook() {
				that.dialogTitle = "异常台账"
				that.ajax({
					url: '/waterOutlet/defDet/getAbnormalStdBook',
					data: JSON.stringify({
						outletId: that.params.outletId
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
						that.dialogVisible = true
					},
				})
			},

			getNotRecordStdBook() {
				that.dialogTitle = "未做台账"
				that.ajax({
					url: '/waterOutlet/defDet/getNotRecordStdBook',
					data: JSON.stringify({
						outletId: that.params.outletId
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
						that.dialogVisible = true
					},
				})
			},

			getListByOutletId() {
				that.ajax({
					url: '/waterOutletLine/getDefenceListByOutletId',
					data: {
						outletId: that.params.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data && result.data.length > 0) {
							that.defenceList = result.data
							that.params.defenceId = result.data[0].defenceId
							//that.formLineData()
							that.getSimpleDefStdBookList()
						} else {
							that.defenceList = []
						}
					},
				})
			},


			getSimpleDefStdBookList(item) {
				if (item) that.params.defenceId = item.defenceId
				that.ajax({
					url: '/waterOutlet/defDet/getSimpleDefStdBookList',
					data: JSON.stringify({
						defenceId: that.params.defenceId,
						recordDate: that.params.monthDateCheck + '-01'
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							item.bg = '#fff'
							if (item.workStatus) {
								if (item.workStatus == 'ABNORMAL') item.bg = '#FFF1D5'
							} else {
								item.bg = '#F2F5F9'
							}
						}
						that.parameterAmountList = result.data
					},
				})
			},

			getList: function(value) {
				if (value) {
					let thisIndex = that.outletList.findIndex(item => item.outletId == value)
					if (thisIndex != -1) {
						that.params.outleName = that.outletList[thisIndex].waterOutletName
					}
				}
				var _this = this;
				var param = JSON.parse(JSON.stringify(_this.params));
				param.monthDate = param.monthDateCheck + "-01"
				that.ajax({
					url: '/waterOutlet/getWaterOutletDateStandingBookList?ticketId=' + that.params.ticketId,
					dataType: 'json',
					data: JSON.stringify(param),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.workStatus == 'NORMAL') {
								item.bg = '#CCDDEF'
							} else if (item.workStatus == 'ABNORMAL') {
								item.bg = '#F5DCA0'
							} else {
								//item.bg = '#fff'
								item.bg = "#F2F2F2 "
							}
						}
						that.dayList = result.data
					}
				})
			},

			//导出危废台账
			exportExcle() {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				let temp = that.params.monthDateCheck;
				window.open('https://www.weifeibangbang.com/waterOutlet/createWaterStandBookExcel?outletId=' +
					that.params.outletId + "&monthDate=" + temp + '&ticketId=' + that.params.ticketId)
				loading.close();
			},

		}
	}
</script>